<section id="widget-grid" class="">
	<!-- row -->
	<div class="row">
		<!-- NEW WIDGET START -->
		<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<!-- Widget ID (each widget will need unique ID)-->
			<div class="jarviswidget jarviswidget-color-blueLight" id="wid-id-0" data-widget-sortable="true" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false">
				<header>
					<span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2> 费用明细管理 </h2>
				</header>
				<!-- widget div-->
				<div>
					<!-- widget edit box -->
					<div class="jarviswidget-editbox">
						<!-- This area used as dropdown edit box -->
					</div>
					<!-- end widget edit box -->

					<!-- widget content -->
					<div class="widget-body no-padding">
						<!-- 自定义搜索区 -->
						<div class="widget-body-toolbar" style="height:70px;overflow:hidden;">
							<form role="form" class="smart-form">
								<div class="global-search-box">
									<section class="pull-left no-padding col pull-width200" >
											<label class="">发车时间</label>
											<label class="input">
											<i class="icon-prepend fa fa-calendar"></i>
												<input type="text" value="2014-09-25 - 2014-09-26" class="input-sm" id="reservation" maxlength="10">
											</label>
                                        </section>
									<section class="pull-left no-padding pull-width160" >
										<label>班线名称</label>
										<label class="input">
											<input type="text" name="tid" placeholder="" class="input-sm">
											<!-- <select id="e5" style="width:100%" class="input-sm select2"></select> -->
										</label>
									</section>
									<section class="pull-left no-padding pull-width120" >
										<label class="">分拨中心</label>
										<label class="input">
											<input type="text" name="tid" placeholder="" class="input-sm">
										</label>
									</section>
									<section class="pull-left no-padding pull-width160" >
										<label>车牌号</label>
										<label class="input">
											<input type="text" class="input-sm" style="width:100%"  name="tid" placeholder="输入车牌号" value=""  id="e5">
											<!-- <select id="e5" style="width:100%" class="input-sm select2"></select> -->
										</label>
									</section>
									<section class="pull-left no-padding pull-width120" >
										<label class="">所属公司</label>
										<label class="input">
											<input type="text" name="tid" placeholder="" class="input-sm">
										</label>
									</section>
									<section class="pull-left no-padding pull-width80" >
										<label class="lael">车型</label>
										<label class="input">
										<label class="select">
											<select class="input-sm">
												<option value="0">全部</option>
												<option value="1">17.5</option>
												<option value="1">9.6</option>
											</select> <i></i> 
										</label>
									</section>
									<section class="pull-left no-padding pull-width80" >
										<label class="lael">是否生成账单</label>
										<label class="input">
										<label class="select">
											<select class="input-sm">
												<option value="0">全部</option>
												<option value="1">是</option>
												<option value="1">否</option>
											</select> <i></i> 
										</label>
									</section>
									<section class="pull-left no-padding pull-width80" >
										<label class="lael">是否支付</label>
										<label class="input">
										<label class="select">
											<select class="input-sm">
												<option value="0">全部</option>
												<option value="1">是</option>
												<option value="1">否</option>
											</select> <i></i> 
										</label>
									</section>
									
									<div class="global-search-btn" >
										<a class="btn btn-primary  btn-sm" type="button"><i class="fa fa-search"></i> 查询</a>
										<a id="more_search" class="btn btn-sm btn-link" type="button">更多条件</a>
							  		</div>
								</div>
								
							</form>
						</div>
						
					  <div class="row padding-10">
							<div class="col-xs-8 col-sm-8">
								<!-- <div class="btn-group">
									<a href="#" class="btn btn-default">审核</a>
								</div> -->
								<div class="btn-group">
									<a href="#" class="btn btn-default">生成账单</a>
								</div>
								<div class="btn-group">
									<a href="#" class="btn btn-default">导出</a>
								</div>
							</div>
							<!-- <div class="col-xs-4 col-sm-4">
								<a href="#" class="btn btn-default pull-right" type="button">相关报表</a>
							</div> -->
						</div>
						<table id="dt_basic" class="table table-striped table-bordered table-hover ">
							<thead>
								<tr>
									<th>
										<label class="no-margin"><input type="checkbox" class="checkbox style-0 checkAll"><span> </span></label>
									</th>
									<th>操作</th>
									<th>发车编码</th>
									<th>分拨中心</th>
									<th>发车时间</th>
									<th>车牌号</th>
									<th>车型</th>
									<th>所属公司</th>
									<th>班次类型</th>
									<th>走货路径</th>
									<th>状态</th>
									<th>实际发车时间</th>
									<th>账期总金额</th>
									<th>合同金额</th>
									<th>预付款</th>
									<th>首付现金</th> 
									<th>首付油卡</th>
									<th>余款</th>
									<th>时效罚款</th>
									<th>应付金额</th>
									<th>领款人</th>
									<th>是否生成账单</th>
									<th>是否已支付</th>
									<th>线路备注</th>
									<th>合同备注</th>
								</tr>
							</thead>
							<tbody>
                            	<tr>
									<td>
										<label class="no-margin">
											<input type="checkbox" class="checkbox style-0">
											<span> </span>
										</label></td>
									<td>
                                        <div class="btn-group">
                                            <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                                             	<i class="fa fa-pencil"></i>
                                                <i class="fa fa-caret-down"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="javascript:void(0);">审核</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
									<td>bj201409251634</td>
									<td>北京分拨中心</td>
									<td>2014-09-25</td>
									<td>京H02183</td>
									<td>17.5</td>
									<td>北京黑马车队</td>
									<td>长线</td>
									<td>北京-苏州-杭州</td>
									<td>已结束</td>
									<td>2014-09-25 22:00</td>
									<td><span class="label label-danger font-xs">8200</span></td>
									<td>8000</td>
									<td>9000</td>
									<td>5000</td>
									<td>4000</td>
									<td><span class="label label-warning font-xs">-1000</span></td>
									<td><span class="label label-warning font-xs">-234</span></td>
									<td><span class="label label-warning font-xs">-1000</span></td>
									<td>张也</td>
									<td><span class="label label-success font-xs">是</span></td>
									<td></td>
									<td>线路备注</td>
									<td>合同备注</td>
								</tr>
								<tr>
									<td>
										<label class="no-margin">
											<input type="checkbox" class="checkbox style-0">
											<span> </span>
										</label></td>
									<td>
                                        <div class="btn-group">
                                            <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                                             	<i class="fa fa-pencil"></i>
                                                <i class="fa fa-caret-down"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="javascript:void(0);">审核</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
									<td>bj201409251634</td>
									<td>北京分拨中心</td>
									<td>2014-09-25</td>
									<td>京H92340</td>
									<td>17.5</td>
									<td>北京黑马车队</td>
									<td>长线</td>
									<td>北京-深圳</td>
									<td>已结束</td>
									<td>2014-09-25 22:00</td>
									<td>12000</td>
									<td>12000</td>
									<td>6000</td>
									<td>3000</td>
									<td>3000</td>
									<td><span class="label label-warning font-xs">6000</span></td>
									<td><span class="label label-warning font-xs">-234</span></td>
									<td><span class="label label-warning font-xs">6000</span></td>
									<td>张也</td>
									<td><span class="label label-success font-xs">是</span></td>
									<td></td>
									<td>线路备注</td>
									<td>合同备注</td>
								</tr>
								
							</tbody>
						</table>

					</div>
					<!-- end widget content -->

				</div>
				<!-- end widget div -->

			</div>
			<!-- end widget -->


		</article>
		<!-- WIDGET END -->

	</div>

	<!-- end row -->

	<!-- end row -->

</section>
<!-- end widget grid -->
<script src="js/plugin/date/moment.js"></script>
<script src="js/plugin/date/daterangepicker.js"></script>



<script type="text/javascript">

	// DO NOT REMOVE : GLOBAL FUNCTIONS!
	pageSetUp();
	

	$(function(){
		$("#e5").select2({  //自动完成
		    placeholder: "快速查找",
			allowClear: true,
		    minimumInputLength: 1,
		    data:[{id:0,text:'62667878'},{id:1,text:'62667871'},{id:2,text:'62667872'},{id:3,text:'62667873'},{id:4,text:'62667874'}]
		});
		$("#e6").select2({  //自动完成
		    placeholder: "根据车牌查找",
			allowClear: true,
		    minimumInputLength: 1,
		    data:[{id:0,text:'京H10884'},{id:1,text:'京H10888'},{id:2,text:'京H10886'},{id:3,text:'京H10884'},{id:4,text:'京H10883'}]
		});
		$("#e7").select2({  //自动完成
		    placeholder: "aaaaa",
			allowClear: false,
		    minimumInputLength: 1,
		    data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
		});
		
		$("#clearMoreRe").click(function(){
			$("#moreResult").hide();
		})

		 $('#reservation').daterangepicker({
			singleDatePicker: false, //必须要有默input 认value
			timePicker: false,		//是否启用时间选择
			//timePickerIncrement:10,	//分钟选择的间隔
			format: 'YYYY-MM-DD',	//返回值的格式
			timePicker12Hour: false,	//采用24小时计时制
			showDropdowns: true,		//是否显示年、月下拉框
		});
	})
	// 更多搜索条件按钮!
	$("#more_search").attr("state","close");			
	$("#more_search").click(function(){
		if ($("#more_search").attr("state") == "close"){
			$(".widget-body-toolbar").css("height","auto");	
			$("#more_search").text("收起条件");
			$("#more_search").attr("state","open");
		}
		else {
			$(".widget-body-toolbar").css("height","70");	
			$("#more_search").text("更多条件");
			$("#more_search").attr("state","close");			
			}
	});

	// PAGE RELATED SCRIPTS

	loadDataTableScripts();
	function loadDataTableScripts() {

		loadScript("js/plugin/datatables/jquery.dataTables-cust.min.js", dt_2);

		function dt_2() {
			loadScript("js/plugin/datatables/ColReorder.min.js", dt_3);
		}

		function dt_3() {
			loadScript("js/plugin/datatables/FixedColumns.min.js", dt_4);
		}

		function dt_4() {
			loadScript("js/plugin/datatables/ColVis.min.js", dt_5);
		}

		function dt_5() {
			loadScript("js/plugin/datatables/ZeroClipboard.js", dt_6);
		}

		function dt_6() {
			loadScript("js/plugin/datatables/media/js/TableTools.min.js", dt_7);
		}

		function dt_7() {
			loadScript("js/plugin/datatables/DT_bootstrap.js", runDataTables);
		}

	}

	function runDataTables() {

		/*
		 * BASIC
		 */
		$('#dt_basic').dataTable({
			//"sDom" : "<'dt-top-row'><'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-4'i><'col-sm-8 text-right'p>>",
			//"sDom" : '<"dt-row dt-bottom-row"flipt>',
			"sPaginationType" : "bootstrap_full",
			"bFilter": false,
			"bAutoWidth": false,
			"aaSorting": [[ 2, "desc" ]],	//默认排序列
			"aoColumns": [
				{ "bSortable": false ,"sWidth":"20px"},
				{ "bSortable": false ,"sWidth":"40px"},
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null
			], 
			//"bPaginate": false, //取消翻页显示
			//"bInfo": true,//页脚信息
			//"bScrollAutoCss": true,
			// "sScrollY": "300px",
			// "bScrollInfinite": true,
			//"bScrollCollapse": true,
			// "iScrollLoadGap": 30,
			//"sScrollY": "200px",
			//"bPaginate": false,
			//"bRetrieve": true,
			"oLanguage": {
			"sZeroRecords": "抱歉， 没有找到",
			"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
			"sInfoEmpty": "没有数据",
			"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
			"oPaginate": {
			"sFirst": "首页",
			"sPrevious": "前一页",
			"sNext": "后一页",
			"sLast": "尾页"
			},
			"sZeroRecords": "没有检索到数据",
			"sProcessing": "<img src='./loading.gif' />"
			},
			"fnDrawCallback": function( oSettings ) {
     			$(oSettings.nTable).css('width','100%');
     			$(oSettings.nTable).find("th,td").css('white-space', 'nowrap');
     			 $(oSettings.nTable).find("tr:last td").css({ "border": '1px solid #DDDDDD'});                 
     			$(oSettings.nTable).find('tbody tr.even').css('backgroundColor', '#FFF');
     			$(oSettings.nTable).find(".btn-group").slice(-5).addClass('dropup');
                $(oSettings.nTable).find(".btn-group").slice(0,3).removeClass('dropup');
                $(oSettings.nTable).parent(".dt-wrapper").css({
                    'overflow': 'auto',
                    'min-height': '300px',
                    'background': '#f9f9f9'
                });
                //$(oSettings.nTable).find("th label input,td label input").next("span").css('margin-right', '0');
                // L = $(oSettings.nTable).find("tr").length;
                // if(L < 6){
                //     $(oSettings.nTable).find("tr:last td").css({
                //         "border": '1px solid #DDDDDD'
                //     });                 
                // };
                var chk = $(oSettings.nTable).find(".checkAll");
                chk.click(function(event) {
                    if ($(this).prop('checked')) {
                        $(this).parents("table").find('tbody td input.checkbox').prop('checked', true)
                        $(this).siblings("span").removeClass('someone');
                    } else {
                        $(this).parents("table").find('tbody td input.checkbox').prop('checked', false)
                    };
                });
                $(oSettings.nTable).find("td input.checkbox").click(function(event) {
                    if (!$(this).prop('checked')) {
                        chk.siblings("span").addClass('someone');
                    };
                    checkStateAll = true;
                    checkStateOne = false;
                    $("tbody td input.checkbox").each(function(index, el) {
                        checkStateAll = checkStateAll && $(this).prop('checked');
                        checkStateOne = checkStateOne || $(this).prop('checked');
                    });
                    if (checkStateAll) {
                        checkStateOne = false;                      
                        chk.prop('checked', true)
                        chk.siblings("span").removeClass('someone');                     
                    }
                    if (checkStateOne) {
                        chk.prop('checked', true)
                        chk.siblings("span").addClass('someone');
                    }                   
                    if (checkStateAll === checkStateOne) {
                        chk.prop('checked', false)
                        chk.siblings("span").removeClass('someone');                         
                    }
                });
 			}

		});

		/* END BASIC */

	}
//		var txt1 = '<div class="col-xs-1 col-sm-1">';
//		var txt2 = "</div>";
//		$("#dt_basic_length").prepend(txt1);
//		$("#dt_basic_length").append(txt2);
		

</script>
